<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="20">
            <el-form-item>
              <el-select clearable v-model="form.categoryId" placeholder="请选择课程类别">
                <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input clearable v-model="form.name" placeholder="课程名字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select clearable v-model="form.teacherId" placeholder="请选择授课教师">
                <el-option v-for="item in teacherCategories" :key="item.id" :label="item.realname"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格开始 -->
    <div class="table">
      <el-table :data="courseData" style="width: 100% ;">
        <el-table-column type="index" :index="1" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column label="课程封面" width="200" align="center">
          <template v-slot="scope">
            <div>
              <img height="120px" width="80px" :src="scope.row.url" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程名字" width="150">
          <template v-slot="scope">
            <div>
              <div>{{ scope.row.name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程描述" width="250">
          <template v-slot="scope">
            <div style="width: 200px;">
              <div>{{ scope.row.description }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="其他信息" width="250" align="center">
          <template v-slot="scope">
            <div>
              <div>授课教师 :{{ scope.row.realname }}</div>
              <div>发布时间 :{{ Number(scope.row.publish_time) | fmtDate }}</div>
              <div>课程发布人 :{{ scope.row.issuer }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chart" label="图表统计" align="center">
          <template v-slot="scope">
            <div>
              <i @click="toChart(scope.row.id)" class="el-icon-pie-chart" style="font-size: 20px; color: #409EFF;"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <div>
              <el-link @click="toView(scope.row)" :underline="false" type="success"
                style="margin-left: 5px;">查看评价</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page" style="margin-top:15px">
      <el-pagination hide-on-single-page background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[4, 8, 12, 16]"
        :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
import { post } from '@/utils/request'
export default {
  data() {
    return {
      // 教师栏目
      teacherCategories: {},
      // 根据条件查询表单对象
      form: {},
      // 保存所有栏目
      categories: [],
      // 课程数据源
      courseData: [],
      // 分页对象
      params: {
        page: 1,
        pageSize: 4,
        status: '待评价'
      },
      // 数据总条数
      total: 0,
      // 点击审核接收当前被点击审核对象
      rowArticle: {},
      // 控制模态框显示与隐藏变量
      visible: false
    }
  },
  methods: {
    // 获取导师数据
    async getTeachers() {
      let res = await get('/user/teachers')
      console.log(res.data.list);
      this.teacherCategories = res.data.list
    },
    toChart(id) {
      this.$router.push({
        path: '/evaluationmanage/chart',
        query: { id }
      })
    },
    // 去评价
    toView(query) {
      this.$router.push({
        path: '/evaluationmanage/myReview',
        query
      })
    },
    async getCourseCategory() {
      let res = await get('/course/findAll')
      // console.log(res);
      this.categories = res.data
    },
    // 分页多条件获取课程信息
    async getCourse() {
      // 将分页对象属性和条件对象属性传给后端
      let temp = {
        ...this.params,//必传
        ...this.form
      }
      // 判断条件是否存在 存在传给后端  不存在删除条件
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      let res = await get('course/pageQueryFind', temp)
      console.log(res);
      this.courseData = res.data.list;
      this.total = res.data.total
    },
    // 每页大小触发的方法  5条一页变成10条一夜
    handleSizeChange(pageSize) {
      // pageSize由5改为10
      this.params.page = 1
      this.params.pageSize = pageSize;
      this.getCourse()
    },
    // 页面发生改变触发方法
    handleCurrentChange(page) {
      this.params.page = page;
      this.getCourse()
    },
  },
  // 监听form
  watch: {
    // form(){
    //   this.getArticle()
    // }
    form: {
      handler() {
        this.params.page = 1;
        this.getCourse()
      },
      deep: true
    }
  },
  created() {
    this.getCourseCategory()
    this.getCourse()
    this.getTeachers()

  },
}
</script>
<style>
.el-icon-pie-chart {
  font-size: 25px;
  color: #2c85de;
  cursor: pointer;
  transition: color 0.3s;
}

.el-icon-pie-chart:hover {
  color: #0d5caf;
}

.el-icon-pie-chart:active {
  color: #074286;
}
</style>